<script setup>
import {onMounted, onUnmounted, ref} from 'vue';
import request from "@/utils/request";
import {useShipStore} from '@/stores/ship';
import {useRouter} from 'vue-router';

const tableData = ref([]);
const total = ref(0);

const rules = reactive({
  ship_id: [{required: true, trigger: 'blur', message: "请输入船舶识别号"}],
  ship_name: [{required: true, trigger: 'blur', message: "请输入船名"}],
  ship_registration_number: [{required: true, trigger: 'blur', message: "请输入"}]
});
const ruleFormRef = ref();

const dialogVisibleLink = ref(false);
const dialogFormVisibleEdit = ref(false);


const keyword = ref('');
const queryByKeyWord = async () => {
  // console.log("查询的关键词为：", keyword.value);
  var response = await request.get("/ship_info/query_keyword?inputKey=" + keyword.value + "&pageNum=" + 1 + "&pageSize=" + 5);
  tableData.value = response.data;
  total.value = response.total;
  if (response.total == 0) {
    ElMessage('未查询到数据');
  }
}

const resetTable = () => {
  tableData.value = [];
  keyword.value = '';
}
// const handleEdit = (raw) => {
//   deal_form = JSON.parse(JSON.stringify(raw))
//   console.log(deal_form);
//   dialogFormVisibleEdit.value = true
// }

// const editAndSave = () => {
//   dialogFormVisibleEdit.value = false
// }

const importBtn = () => {
  ElNotification({
    title: '提示',
    message: h('i', {style: 'color: teal'}, '导入只接受*.xlsx格式的数据！'),
    type: 'info'
  })
}

const handleCurrentChange = async (num) => {
  var all_data = await request.get("/ship_info/all");
  if (total.value != all_data.total) {
    //搜索之后进行页码切换。
    var response = await request.get("/ship_info/query_keyword?inputKey=" + keyword.value + "&pageNum=" + num + "&pageSize=" + 5);
    tableData.value = response.data;
  } else {
    //未进行搜索，页码切换。
    var response2 = await request.get("/ship_info/query_page?pageNum=" + num + "&pageSize=" + 5);
    tableData.value = response2.data;
  }
}

const store = useShipStore();
const linkToChart = (row) => {
  dialogVisibleLink.value = true;

  // 重置state
  store.$reset();

  // 批量修改数据
  store.$patch({
    ship_id: row.ship_id,
    ship_name: row.ship_name,
    port_of_registry: row.port_of_registry,
    ship_type: row.ship_type,
    tonnage: row.tonnage,
    total_power: row.total_power
  })

  // store.ship_id = row.ship_id;
  // store.ship_name = row.ship_name;
  // store.port_of_registry = row.port_of_registry;
  // store.ship_type = row.ship_type;
  // store.tonnage = row.tonnage;
  // 修改可视化所需的船舶信息 状态存储pinia
  // console.log(store);
  // console.log("船舶信息修改完成。");
}


const exportBtn = () => {
  window.open("http://10.32.96.8:9003/table/export_default")
  // request.get("/table/export_default", {responseType: "blob"}).then(() => {

  // })
}

// const download_default_format = () => {
//   window.open('http://localhost:10029/table/default_format')
// }

//限制上传文件
const beforeUpload = async (data) => {
  if (data.file.file?.type !== "image/png") {
    message.error("只能上传png格式的图片文件，请重新上传");
    return false;
  }
  return true;
}


const router = useRouter();

onMounted(async () => {
  //初始化表格数据
  var response = await request.get("/ship_info/query_page?pageNum=" + 1 + "&pageSize=" + 5);
  // console.log(response);
  tableData.value = response.data;
  total.value = response.total;
  // console.log(response.total);
});

onUnmounted(() => {

})

</script>

<template>
  <div class="app-wrapper">
    <el-card style="">

      <div style="margin: 15px 0;">

        <el-input style="width: 400px;" placeholder="请输入搜索关键词" v-model="keyword" @keyup.enter.native="queryByKeyWord()">

          <template #suffix>
            <el-icon @click="keyword = ''">
              <i-ep-CloseBold/>
            </el-icon>
          </template>
        </el-input>

        <el-button style="margin-left: 5px;padding: 0 20px;" type="primary" @click="queryByKeyWord()">
          <el-icon style="vertical-align: middle; ">
            <i-ep-Search/>
          </el-icon>
          搜索
        </el-button>

        <el-button style="margin-left: 5px; padding: 0 20px;" type="warning" @click="resetTable()">
          <el-icon style="vertical-align: middle;">
            <i-ep-Refresh/>
          </el-icon>
          重置
        </el-button>
      </div>


      <!-- 导入 -->
      <!-- <div>
        <el-upload v-model:file-list="fileList" action="/table/import" style="display: inline-block;"
          :show-file-list="false" accept="'xlsx'">
          <el-button type="primary" @click="importBtn()" size="large" style="margin: 0 10px;"> 导入
            <el-icon>
              <i-ep-Bottom />
            </el-icon>
          </el-button>
        </el-upload>
      </div> -->

      <!-- 导出 -->
      <el-popconfirm width="300" confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
                     icon-color="#626AEF" title="即将导出船舶信息表，确定继续吗？" @confirm="exportBtn()">
        <template #reference>
          <el-button type="primary" size="large">导出表格
            <el-icon>
              <i-ep-Bottom/>
            </el-icon>
          </el-button>
        </template>
      </el-popconfirm>

      <!--            <el-button type="primary" size="large" @click="download_default_format()">下载默认格式-->
      <!--              <el-icon>-->
      <!--                <i-ep-Bottom/>-->
      <!--              </el-icon>-->
      <!--            </el-button>-->

      <!--上传  （导入）-->
      <!--      <el-upload v-model:file-list="fileList" action="http://localhost:10029/table/upload"-->
      <!--                 style="display: inline-block;"-->
      <!--                 :show-file-list="false" accept="'xls'">-->
      <!--        <el-button type="primary" @click="importBtn()" size="large" style="margin: 0 10px;"> 导入-->
      <!--          <el-icon>-->
      <!--            <i-ep-Top/>-->
      <!--          </el-icon>-->
      <!--        </el-button>-->
      <!--      </el-upload>-->


      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="ship_id" label="船舶识别号" width="130"/>
        <el-table-column prop="ship_name" label="船名" width="100"/>
        <el-table-column prop="ship_registration_number" label="船舶登记号码" width="120"/>
        <el-table-column prop="port_of_registry" label="船籍港" width="80"/>
        <el-table-column prop="call_sign" label="呼号" width="80"/>
        <el-table-column prop="ship_type" label="船舶种类" width="80"/>
        <el-table-column prop="tonnage" label="总吨" width="80"/>
        <el-table-column prop="total_power" label="总机功率" width="80"/>
        <el-table-column prop="degree_of_cabin_automation" label="机舱自动化程度" width="120"/>
        <el-table-column prop="passenger_capacity_quota" label="载客限额" width="80"/>
        <el-table-column prop="navigation_zone" label="航区" width="80"/>
        <el-table-column prop="captain" label="船长" width="80"/>
        <el-table-column prop="first_mate" label="大副" width="80"/>
        <el-table-column prop="second_mate" label="二副" width="80"/>
        <el-table-column prop="third_mate" label="三副" width="80"/>
        <el-table-column prop="pilot" label="驾驶员" width="80"/>
        <el-table-column prop="senior_duty_sailor" label="高级值班水手" width="80"/>
        <el-table-column prop="duty_sailor" label="值班水手" width="80"/>
        <el-table-column prop="chief_engineer" label="轮机长" width="80"/>
        <el-table-column prop="first_engineer" label="大管轮" width="80"/>
        <el-table-column prop="second_engineer" label="二管轮" width="80"/>
        <el-table-column prop="third_engineer" label="三管轮" width="80"/>
        <el-table-column prop="marine_engineer" label="轮机员" width="80"/>
        <el-table-column prop="senior_duty_mechanic" label="高级值班机工" width="80"/>
        <el-table-column prop="duty_mechanic" label="值班机工" width="80"/>
        <el-table-column prop="passenger_transport_department_personnel" label="客运部人员" width="80"/>
        <el-table-column prop="part_time_GMDSS_restricted_operator" label="兼职GMDSS限用操作员" width="80"/>
        <el-table-column prop="GMDSS_No" label="GMDSS通用操作员" width="80"/>
        <el-table-column prop="electronic_electrical_technician" label="电子电气员" width="80"/>
        <el-table-column prop="electronics_technician" label="电子技工" width="80"/>
        <el-table-column prop="full_time_radio_electronics_officer" label="专职GMDSS无线电电子员" width="80"/>

        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <!-- <el-button type="success" @click="handleEdit(scope.row)">编辑
              <el-icon>
                <i-ep-EditPen />
              </el-icon>
            </el-button> -->

            <el-button type="success" @click="linkToChart(scope.row)">
              可视化
              <el-icon>
                <i-ep-PieChart/>
              </el-icon>
            </el-button>
          </template>
        </el-table-column>

        <template #empty>
          <el-empty description="没有找到相关数据哦。"/>
        </template>

      </el-table>

      <!-- 分页 Pagination -->
      <div style="margin: 15px 0;">
        <el-pagination background layout=" prev, pager, next" :total="total" @current-change="handleCurrentChange"/>
      </div>

      <el-dialog v-model="dialogVisibleLink" title="提醒" width="500" :before-close="handleClose">
        <span>你即将跳转到可视化界面</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisibleLink = false">取消</el-button>
            <el-button type="primary" @click="router.push('/vis')"> 确定</el-button>
          </div>
        </template>
      </el-dialog>

      <!-- <el-dialog v-model="dialogFormVisibleEdit" title="编辑学生信息" width="30%">
        <el-form :model="deal_form" :rules="rules" ref="ruleFormRef" status-icon>
          <el-form-item label="船舶识别号" prop="ship_id" :label-width="formLabelWidth">
            <el-input v-model="deal_form.ship_id" autocomplete="off" />
          </el-form-item>
          <el-form-item label="船名" prop="ship_name" :label-width="formLabelWidth">
            <el-input v-model="deal_form.ship_name"></el-input>
          </el-form-item>
          <el-form-item label="船舶登记号码" prop="ship_registration_number" :label-width="formLabelWidth">
            <el-input v-model="deal_form.ship_registration_number"></el-input>
          </el-form-item>
          <el-form-item label="船籍港" prop="port_of_registry" :label-width="formLabelWidth">
            <el-input v-model="deal_form.port_of_registry"></el-input>
          </el-form-item>
          <el-form-item label="呼号" prop="call_sign" :label-width="formLabelWidth">
            <el-input v-model="deal_form.call_sign"></el-input>
          </el-form-item>
          <el-form-item label="船舶种类" prop="ship_type" :label-width="formLabelWidth">
            <el-input v-model="deal_form.ship_type"></el-input>
          </el-form-item>
          <el-form-item label="总吨" prop="tonnage" :label-width="formLabelWidth">
            <el-input v-model="deal_form.tonnage"></el-input>
          </el-form-item>
          <el-form-item label="总机功率" prop="total_power" :label-width="formLabelWidth">
            <el-input v-model="deal_form.total_power"></el-input>
          </el-form-item>
          <el-form-item label="机舱自动化程度" prop="degree_of_cabin_automation" :label-width="formLabelWidth">
            <el-input v-model="deal_form.degree_of_cabin_automation"></el-input>
          </el-form-item>
          <el-form-item label="载客限额" prop="passenger_capacity_quota" :label-width="formLabelWidth">
            <el-input v-model="deal_form.passenger_capacity_quota"></el-input>
          </el-form-item>
          <el-form-item label="航区" prop="navigation_zone" :label-width="formLabelWidth">
            <el-input v-model="deal_form.navigation_zone"></el-input>
          </el-form-item>
          <el-form-item label="船长" prop="captain" :label-width="formLabelWidth">
            <el-input v-model="deal_form.captain"></el-input>
          </el-form-item>
          <el-form-item label="大副" prop="first_mate" :label-width="formLabelWidth">
            <el-input v-model="deal_form.first_mate"></el-input>
          </el-form-item>
          <el-form-item label="二副" prop="second_mate" :label-width="formLabelWidth">
            <el-input v-model="deal_form.second_mate"></el-input>
          </el-form-item>
          <el-form-item label="三副" prop="third_mate" :label-width="formLabelWidth">
            <el-input v-model="deal_form.third_mate"></el-input>
          </el-form-item>
          <el-form-item label="驾驶员" prop="pilot" :label-width="formLabelWidth">
            <el-input v-model="deal_form.pilot"></el-input>
          </el-form-item>
          <el-form-item label="高级值班水手" prop="senior_duty_sailor" :label-width="formLabelWidth">
            <el-input v-model="deal_form.senior_duty_sailor"></el-input>
          </el-form-item>
          <el-form-item label="值班水手" prop="duty_sailor" :label-width="formLabelWidth">
            <el-input v-model="deal_form.duty_sailor"></el-input>
          </el-form-item>
          <el-form-item label="轮机长" prop="chief_engineer" :label-width="formLabelWidth">
            <el-input v-model="deal_form.chief_engineer"></el-input>
          </el-form-item>
          <el-form-item label="大管轮" prop="first_engineer" :label-width="formLabelWidth">
            <el-input v-model="deal_form.first_engineer"></el-input>
          </el-form-item>
          <el-form-item label="二管轮" prop="second_engineer" :label-width="formLabelWidth">
            <el-input v-model="deal_form.second_engineer"></el-input>
          </el-form-item>
          <el-form-item label="三管轮" prop="third_engineer" :label-width="formLabelWidth">
            <el-input v-model="deal_form.third_engineer"></el-input>
          </el-form-item>
          <el-form-item label="轮机员" prop="marine_engineer" :label-width="formLabelWidth">
            <el-input v-model="deal_form.marine_engineer"></el-input>
          </el-form-item>
          <el-form-item label="高级值班机工" prop="senior_duty_mechanic" :label-width="formLabelWidth">
            <el-input v-model="deal_form.senior_duty_mechanic"></el-input>
          </el-form-item>
          <el-form-item label="值班机工" prop="duty_mechanic" :label-width="formLabelWidth">
            <el-input v-model="deal_form.duty_mechanic"></el-input>
          </el-form-item>
          <el-form-item label="客运部人员" prop="passenger_transport_department_personnel" :label-width="formLabelWidth">
            <el-input v-model="deal_form.passenger_transport_department_personnel"></el-input>
          </el-form-item>
          <el-form-item label="兼职GMDSS限用操作员" prop="part_time_GMDSS_restricted_operator" :label-width="formLabelWidth">
            <el-input v-model="deal_form.part_time_GMDSS_restricted_operator"></el-input>
          </el-form-item>
          <el-form-item label="GMDSS通用操作员" prop="GMDSS_No" :label-width="formLabelWidth">
            <el-input v-model="deal_form.GMDSS_No"></el-input>
          </el-form-item>
          <el-form-item label="电子电气员" prop="electronic_electrical_technician" :label-width="formLabelWidth">
            <el-input v-model="deal_form.electronic_electrical_technician"></el-input>
          </el-form-item>
          <el-form-item label="电子技工" prop="electronics_technician" :label-width="formLabelWidth">
            <el-input v-model="deal_form.electronics_technician"></el-input>
          </el-form-item>
          <el-form-item label="专职GMDSS无线电电子员" prop="full_time_radio_electronics_officer" :label-width="formLabelWidth">
            <el-input v-model="deal_form.full_time_radio_electronics_officer"></el-input>
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
            <el-button type="primary" @click="editAndSave()">
              确定修改
            </el-button>
          </span>
        </template>
      </el-dialog> -->

    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.app-wrapper {
  margin: 2% 30px;
}
</style>